<template>
    <header>
        <div class="info">
            <div class="avatar">
                <img
                    src="https://fu5.web.sdo.com/10088/201707/15002972564463.jpg"
                    alt=""
                />
            </div>
            <h4>
                欢迎您，<strong>{{ user.username }}</strong>
            </h4>
            <el-button type="danger" size="small" @click="logout = true"
                >注销</el-button
            >
        </div>
    </header>
    <Teleport to="body">
        <el-dialog v-model="logout" width="300" align-center>
            <template #header>
                <h4 class="text-center">注销登录</h4>
            </template>
            <template #footer>
                <div class="btns-wrapper">
                    <el-button type="primary" @click="logout = false"
                        >取消</el-button
                    >
                    <el-button type="danger" @click="logoutEvent"
                        >确定</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </Teleport>
</template>

<script setup>
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useUser } from "../../../../store/store";
import { Logout } from "../../../../api/index";
import { ClearStorage } from "../../../../utils/index";
const { user } = storeToRefs(useUser());
const router = useRouter();
const logout = ref(false);

const logoutEvent = async () => {
    const res = await Logout();
    console.log(res);
    if (res) {
        ClearStorage("user");
        return router.replace("/login");
    }
};
</script>

<style lang="scss" scoped>
header {
    width: 100%;
    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    .info {
        margin-left: auto;
        display: flex;
        align-items: center;
        color: #010101;
        font-size: 14px;
        padding-right: 20px;
        .avatar {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid var(--el-menu-active-color);
            img {
                width: 100%;
            }
        }
        h4 {
            margin: 0px 10px;
        }
    }
}
.text-center {
    text-align: center;
}
.btns-wrapper {
    display: flex;
    justify-content: center;
}
</style>
